<template>
  <div>
    <div v-loading="pageLoading">
      <mod-exam ref="refTrain" type="Train" :transfer-data="transferData" style="margin-bottom: 32px" title="培训类" :list="trainSubjects" />
      <mod-exam ref="refExam" type="Exam" :transfer-data="transferData" title="考试类" :list="examSubjects" />
    </div>
    <el-row>
      <el-col class="step_btn" :span="24" align="center">
        <el-button @click="onPrevStep">上一步</el-button>
        <el-button type="primary" :loading="nextLoading" @click="beforeNextStep">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import modExam from '../components/modExam';

import {
  api_GET_TrainSubject // 获取科目列表
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  components: {
    modExam
  },
  props: {
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isShow: {
      type: Boolean(),
      default: false
    },
    transferData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: false,
      nextLoading: false,
      examData: {}
    };
  },
  computed: {
    trainSubjects () {
      const list = this.examData.trainSubjects || [];
      list.sort((a, b) => a.sortOrder - b.sortOrder);
      return list;
    },
    examSubjects () {
      const list = this.examData.examSubjects || [];
      list.sort((a, b) => a.sortOrder - b.sortOrder);
      return list;
    }
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getSubject({
            trainningId: this.trainInfo.id
          });
        }
      }
    }
  },
  methods: {
    // 获取页面数据
    getSubject (qo) {
      this.pageLoading = true;
      this.nextLoading = true;
      api_GET_TrainSubject(qo)
        .then(
          res => {
            this.pageLoading = false;
            this.nextLoading = false;
            this.examData = res;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.nextLoading = false;
            this.$message({
              message: `科目获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    beforeNextStep () {
      const _train = this.$refs.refTrain.getInsideUserData();
      const _exam = this.$refs.refExam.getInsideUserData();
      Promise.all([_train, _exam])
        .then(
          res => {
            console.log('subjectIds: ', res);
            let _subjectIds = [];
            res.forEach(item => {
              _subjectIds = _subjectIds.concat(item);
            });

            if (_subjectIds.length) {
              this.$emit('onSetTransferData', 'subjectIds', _subjectIds);
              this.onNextStep();
            } else {
              this.$message({
                message: `请选择科目`,
                type: 'warning',
                showClose: true
              });
            }
          }
        );
    },
    onPrevStep () {
      this.$emit('onPrevStep');
    },
    onNextStep () {
      this.$emit('onNextStep');
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
